<template>
  <div class="help-files-box h-full w-full">
    <div class="item w-full m-b-xs" v-for="item in dataList" :key="item.id">
      <div class="title">
        <span class="line"></span>
        <span class="name f18 font-bold">{{ item.name }}</span>
      </div>
      <div class="list">
        <ul>
          <li
            @dblclick="preview(data)"
            @click="chooseFile(data)"
            v-for="(data) in item.list"
            :key="data.id"
            :class="{'checked':data.id === fileId}"
            title="双击预览">
            {{ data.name }}
            <i @click="download(data)" class="icon iconfont icon-download text-blue f14"></i>
            <div class="right">{{ dateFormat('YYYY-mm-dd', new Date(data.modifyTime)) }}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import dicService from '@/api/dicService'
import storeService from '@/api/storeService'

const baseUrl = window.config.VUE_APP_BASE_URL

export default {
  name: 'HelpFiles',

  data () {
    return {
      fileId: '',
      dataList: [],
      fileContent: null,
      downloadUrl: null,
      columns: [
        {
          title: '名称',
          dataIndex: 'name',
          width: '30%',
          align: 'center'
        },
        {
          title: '上传内容',
          dataIndex: 'content',
          width: '30%',
          align: 'center'
        },
        {
          title: '操作',
          width: '30%',
          align: 'center',
          dataIndex: 'action'
        }
      ],
      dataSource: [
        {
          name: '杭州“浙地智管”操作手册',
          content: 'word'
        }
      ]
    }
  },

  mounted () {
    this.init()
  },

  methods: {
    chooseFile () {

    },
    init () {
      this.getList()
    },
    async getList () {
      const params = {
        dicName: '帮助',
        parentId: '/'
      }
      const list = await dicService.treeDicItemByDicName(params.dicName, params.parentId)
      const dataList = []
      const promiseList = []
      list.forEach(item => {
        const name = item.name
        const storeId = item.value
        const it = {
          name,
          storeId
        }
        dataList.push(it)
        promiseList.push(this.getFileByStoreId(storeId)
          .then((res) => {
            it.list = res.rows
          }))
      })
      Promise.all(promiseList).then(() => {
        this.dataList = dataList
      })
    },
    async getFileByStoreId (storeId) {
      const data = await storeService.searchStoreFile(1, 9999, { parentId: storeId })
      return data
    },
    preview (data) {
      const url = baseUrl + `store/download?fileId=${data.id}`
      window.open(url)
    },
    download (data) {
      const url = baseUrl + `store/download?fileId=${data.id}&mimetype=x-msdownload`
      window.open(url)
    }
  }
}
</script>

<style lang="less" scoped>
.help-files-box {
  li {
    list-style: square;
    color: #222;
    font-size: 16px;
    height: 30px;
    width: 100%;

    &:hover {
      cursor: pointer;
    }
  }

  .item {
    height: 33%;

    .title {
      border-bottom: 1px solid #dedede;
      height: 30px;
      display: flex;
      align-items: center;

      .line {
        display: inline-block;
        width: 5px;
        height: 15px;
        line-height: 30px;
        background: #f99e18;
        margin-right: 5px;
      }

      .name {
        color: #f99e18;
      }
    }

    .list {
      padding-left: 15px;
      height: 85%;
      overflow-y: auto;
      color: #222;
    }

    .checked {
      color: #0493FF;
      font-weight: 700;
    }
  }
}
</style>
